<template>
  <div id="user-center">
    <div style="height:10px;" />
    <!-- 每个元素的两侧间隔相等 -->
    <van-row type="flex" justify="space-around" align="center">
      <van-col span="12"
        ><van-image
          round
          style="left:8%;"
          width="100"
          height="100"
          fit="cover"
          :src="'data:image/jpeg;base64,' + image"
      /></van-col>
      <van-col type="flex" align="center" justify="space-around" span="12">
        <b>{{ nickname }}</b>
      </van-col>
    </van-row>

    <div style="height:10px;" />
    <div style="height:2px; background-color:#ebedf0;"></div>

    <van-cell title="地址编辑" is-link :to="{ name: 'addrList' }" />

    <van-grid :column-num="2">
      <van-grid-item
        icon="shopping-cart-o"
        text="购物车"
        @click="onCartClick"
      />
      <van-grid-item icon="shop-o" text="个人商店" @click="onShopcenterClick" />
    </van-grid>

    <van-grid :column-num="2">
      <van-grid-item
        icon="notes-o"
        text="全部订单"
        :to="{ name: 'orderlist' }"
      />
      <van-grid-item icon="chat-o" text="售后评价" @click="onReviewClick" />
    </van-grid>

    <div style="position:fixed; bottom:0; width:100%;">
      <div style="padding: 15px;">
        <van-button
          plain
          round
          size="large"
          type="danger"
          @click="onLogOutClick"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import {
  Image,
  Grid,
  GridItem,
  Icon,
  Cell,
  Row,
  Col,
  Button,
  Toast,
  Notify
} from "vant"
export default {
  components: {
    [Image.name]: Image,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button
  },
  data() {
    return {
      image: "",
      phone: "",
      nickname: "",
      gender: "",
      payment_info: "",
      created_time: ""
    }
  },
  methods: {
    onCartClick() {
      this.$router.push({ name: "cart" })
    },
    onShopcenterClick() {
      this.$router.push({ name: "shopArrange" })
    },
    onLogOutClick() {
      Notify({ type: "primary", message: "已退出登录" })
      this.$store.commit("CUSTOMER_LOGOUT")
      this.$router.push({ name: "login" })
    },
    onReviewClick() {
      this.$router.push({
        name: "reviews",
        params: { customer_id: this.$store.state.customer_id }
      })
    }
  },
  mounted: function() {
    /* 预载顾客信息 */
    axios
      .get(API_URL + "customer", {
        headers: {
          authorization: this.$store.state.customer_token
        }
      })
      .then(response => {
        this.$store.commit("SET_CUSTOMER_ID", response.data.customer_id)
        this.phone = response.data.phone
        this.nickname = response.data.nickname
        this.gender = response.data.gender
        this.payment_info = response.data.payment_info
        this.created_time = response.data.created_time
        this.image = response.data.image
      })
      .catch(err => {
        if (err.response.status == 401) {
          this.$router.push({ name: "Login" })
        }
        console.error(err)
      })
  }
}
</script>

<style scoped></style>
